<template>
    <div class="top">
        <div class="lef">
            <back_icon @click="back" />
        </div>
        {{ title }}
    </div>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const back_icon = defineAsyncComponent(() => import('../common/icon_back.vue'))
let props = defineProps(
    {
        title: {
            type: String,
        },
        back_flag: {
            type: Boolean,
            default: () => false
        }
    }
)
function back() {
    router.go(-1)
}
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.top {
    width: 100%;
    height: r(44);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: r(16);

    .lef {
        position: absolute;
        width: r(15);
        height: r(15);
        position: absolute;
        left: r(10);
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>